<template>
  <div>
    <el-card>
      <el-row>
        <div class="table-header-options">
          <el-button type="primary" :icon="Plus" @click="toAdd()" v-button="['api:sys:sysrole:create']">
            新增
          </el-button>
          <el-button type="success" :icon="Search">查询</el-button>
        </div>
      </el-row>
      <el-row>
        <el-table :data="tableList" :border="true"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <el-table-column prop="roleName" label="名称" />
          <el-table-column prop="isAdmin" label="内置管理员">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-switch v-model="scope.row.isAdmin" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="enabled" label="启用">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-switch v-model="scope.row.isEnabled" @change="changeEnabled(scope.row)" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" :min-width="440">
            <template #default="scope">
              <el-button type="primary" :icon="Promotion" @click="toAddUser(scope.row.id)"
                v-button="['api:sys:sysuserrole:index']">
                分配人员
              </el-button>
              <el-button type="primary" :icon="Promotion" @click="toAddMenu(scope.row.id)"
                v-button="['api:sys:sysrolemenu:index']">
                分配菜单
              </el-button>
              <el-button type="primary" :icon="EditPen" @click="toEdit(scope.row)"
                v-button="['api:sys:sysrole:update']">
                编辑
              </el-button>
              <el-popconfirm title="确定要删除这条数据?" @confirm="toDelete(scope.row)">
                <template #reference>
                  <el-button type="danger" :icon="Delete" v-button="['api:sys:sysrole:delete']">
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div class="table-buttom-options">
          <Pagination :total="search.total" v-model:pageIndex="search.pageIndex" v-model:pageSize="search.pageSize"
            @change="query"></Pagination>
        </div>
      </el-row>
    </el-card>

    <Edit v-if="isShow" v-model="isShow" :type="editEnum" :title="title" :info="info" @success="query()" />

    <RoleUser v-if="roleUserIsShow" v-model="roleUserIsShow" :toRoleId="toRoleId" @success="query()" />

    <RoleMenu v-if="open" v-model="open" :type="editEnum" :roleId="toRoleId" :title="title" @success="query()" />
  </div>
</template>

<script lang="ts" setup>
import Edit from "@/views/sys/role/edit.vue";
import { Plus, Delete, EditPen, Search, Promotion } from "@element-plus/icons-vue";
import Pagination from "@/components/pagination/pagination.vue";
import RoleUser from "@/views/sys/role/roleUser.vue";
import RoleMenu from "@/views/sys/role/roleMenu.vue";
import RoleApi, { Role, RoleQuery } from "@/api/sys/role";
import { EditEnum } from "@/enums/EditEnum";
defineOptions({
  name: "role",
  inherititems: false,
});
//表格数据
const tableList = ref<Role[]>([]);

onMounted(async () => {
  await query();
});

const search = reactive<RoleQuery>({
  searchString: "",
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

const query = async () => {
  const { dataList, totalCount } = await RoleApi.query(search);
  tableList.value = dataList;
  search.total = totalCount;
};

const isShow = ref(false);
const editEnum = ref<EditEnum>();
const toAdd = () => {
  info.value = {};
  editEnum.value = EditEnum.create;
  title.value = "新增";
  isShow.value = true;
};

const info = ref<Role>();
const toEdit = (row: Role) => {
  info.value = Object.assign({}, row);
  editEnum.value = EditEnum.update;
  title.value = "修改";
  isShow.value = true;
};

const toDelete = async (row: Role) => {
  const { success, message } = await RoleApi.delete(row.id);
  if (success) {
    ElNotification({
      title: message,
      type: "success",
    });
    query();
  } else {
    ElNotification({
      title: message,
      type: "error",
    });
  }
};

const changeEnabled = async (row: Role) => {
  const { success, message } = await RoleApi.update(row);
  if (success) {
    ElNotification({
      title: message,
      type: "success",
    });
  } else {
    ElNotification({
      title: message,
      type: "error",
    });
  }
};

const roleUserIsShow = ref(false);
const toRoleId = ref("");
const toAddUser = (roleId: string) => {
  roleUserIsShow.value = true;
  toRoleId.value = roleId;
};

const title = ref("");
const open = ref(false);
const toAddMenu = (roleId: string) => {
  editEnum.value = EditEnum.create;
  title.value = "选择菜单";
  toRoleId.value = roleId;
  open.value = true;
};
</script>
